<template>
    <div ref= "popModal">
        <transition name="fade" >
            <div class="form-modal-wrap" v-show='modalIsShow'>
                <transition name="slideUp">
                    <div class="form-modal" v-show='modalIsShow'>
                        <img class='modal-close' src='../../assets/images/peach-svg/Group 241.svg' @click.stop='closeModal()'>
                        <div class="modal-header"><h4>{{title}}</h4></div>
                        <div class="modal-message">{{message}}</div>
                        <div class="modal-body">
                            <myForm :info=info :format=format :width="width-50" :labelWidth="labelWidth" @submit="updateInfo" @closeform="closeModal()" :okBtnText="okText" :cancelBtnText="cancelText" :okBtnStatus="okBtnStatus" :cancelBtnStatus="cancelBtnStatus" :rule=rule @on-select-submit="onSelectChange" :CDN="CDN" :labelClass="labelClass" v-if="isReload"></myForm>
                        </div>
                        <div class="modal-footer" slot="footer"></div>
                    </div>
                </transition>
            </div>
        </transition>
    </div>

</template>
<script>
import Vue from "vue";
import myForm from "./myForm";
Vue.component("myForm", myForm);
export default {
    name: "formModal",
    props:{
        title:{//标题内容
            type:String,
            default:'添加用户'
        },
        message:{
            type:String,
            default:''
        },
        width:{//宽度
            type:[Number, String],
            default:800
        },
        heightIsOver:{//垂直方向 modal高度超出就置顶 否则就居中
            type:Boolean,
            default:false
        },
        labelWidth:{
            type:Number,
            default:100
        },
        maskCloseable: {
            type: Boolean,
            default: false
        },
        CDN: {
            type: String,
            default: ""
        },
        okText: {
            type: String,
            default: "确定"
        },
        cancelText: {
            type: String,
            default: "取消"
        },
        cancelBtnStatus: {
            type: Number, //0 不可见 1可点击 2不可点击
            default: 1
        },
        okBtnStatus: {
            type: Number, //0 不可见 1可点击 2不可点击
            default: 1
        },
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        format: {
            type: Object,
            default: () => {
                return {};
            }
        },
        rule: {
            type: Object,
            default: () => {
                return {};
            }
        },
        labelClass:{
            type:String,
            default:"",
        },
        okFunc: Function,
        onChange:Function,
    },
    data(){
        return{
            modalIsShow:false,
            closeCallBack: "",
            topPx:100,

            isReload:true,
        }
    },
    computed:{
        rWidth(){
            if(typeof(this.width)=="number"){
                return this.width+"px";
            }else{
                return this.width;
            }
        },
    },
    methods:{
        closeModal(){
            this.modalIsShow = false;
            if (this.closeCallBack != "") {
                this.closeCallBack(this._uid);
            }
        },
        updateInfo(info) {
            this.okFunc(info);
        },
        onSelectChange(labelChange,value){
            this.onChange(labelChange,value)
        },
        _reloadForm(){
            this.isReload = false;
            this.$nextTick(()=>{
                this.isReload = true;
            })
        }
    },
    mounted() {
        this.$nextTick(() => {
            document.getElementById("app").appendChild(this.$refs.popModal);
        })
        setTimeout(() => {
            let diffHeight = this.$el.clientHeight-this.$el.children[0].clientHeight;
            if(diffHeight<0) diffHeight=0;
            else {
                diffHeight = diffHeight/2;
            }
            if(diffHeight>50) diffHeight=diffHeight-50;
            this.topPx = diffHeight;
        }, 100);
  }
}
</script>
